<template>
  <div class="component">
    <div class="input-block">
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="0px" class="demo-ruleForm">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="密码" v-model="loginForm.password"
                    @keyup.enter.native="submitForm('loginForm')"></el-input>
        </el-form-item>
        <div class="login-btn">
          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {normalGet,normalPost,saSetToken} from '../../methods2/index'
  import {localSave} from "../../methods2/util";

  let Remotehost = 'http://api.gdyunlifang.com/',
      xiaofenHost = 'http://192.168.0.250' ,
      host = Remotehost,
      loginUrl = host + '/login',
      userDetailUrl =  host + '/user/info'; //'http://api.gdyunlifang.com'

  export default {
    name: "login-card",
    data: function () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 2, max: 20, message: '用户名只能由2-20个字符组成'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 4, max: 20, message: '密码只能由4-20个字符组成'}
          ]
        },
        loading:'',
      }
    },
    methods: {
      //提交表单，请求登录
      submitForm(form) {
        this.$refs[form].validate((res) => {
          if (res) {
            this.loading = this.$loading({
                lock: true,
                text: '正在登录...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
              });
            this.requestLogin(this.loginForm.username, this.loginForm.password);

          } else {
            this.$message.error('账号或密码不符合要求...');
          }
        })
      },
      //检查是否有登录信息
      checkLogin(){
        return saSetToken()
      },
      requestLogin(user,pass){
        let params = {
            username: user,
            password: pass
          };

        let suc = (data) => {

              saSetToken(data.token);
              this.requestUserInfo();
            },
            err = () => {
              this.$emit('fail');
            },
            always = () => {
              this.loading.close();
            };

        normalPost(loginUrl,params,suc,err,this.$message,always);
      },
      requestUserInfo(){
        //保存用户信息
        let suc = (data) =>{
              let userInfo = {};

              userInfo.userId = data.id;
              userInfo.realname = data.realname;
              userInfo.email = data.email;
              userInfo.mobile = data.mobile;
              userInfo.status = data.status;
              userInfo.username = data.username;
              userInfo.orgId = data.orgid;
              userInfo.roleId = data.roleId;

              if(data.userId === 1){
                userInfo.role = 'super';
              }else if(data.type === 0){
                userInfo.role = 'admin';
              }

              localSave('yunlifangUserInfo',userInfo);
              this.$message.success('登录成功');
              this.$emit('success');
            },
            err = () =>{
              this.$emit('fail');
            },
            always = () =>{
              this.loading.close();
            }

        normalGet(userDetailUrl,'',suc,err,this.$message,always);
      }
    },
    mounted(){
      if(this.checkLogin()){
        console.log('check true')
        this.$emit('success',localSave('yunlifangUserInfo'));
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../../static/style/public';
  .component {
    .input-block {
      margin:0 auto;
      padding: 20px 40px 30px 40px;
      width: 320px;
      background-color: #eee;
      border-radius: 5px;
      .title {
        margin: 10px;
        font-size: 25px;
        font-weight: 600;
      }
      .login-btn {
        width: 100%;
        button {
          width: 100%;
          background-color: $primaryColor;
        }
      }
      input {
        height: 30px !important;
      }
    }

    .com-info {
      position: absolute;
      bottom: 50px;
      left: 0px;
      right: 0px;
      color: black;

    }
  }

</style>
